<template>
<div>
    <!-- 输入框 -->
    <div class= "city-search">
        <input
        type="text"
        placeholder= "请输入城市名或拼音"
        class= "city-input"
        v-model= "searchKey">
    </div>
    <!-- 输入框下面的列表 -->
    <div
    :ref= 'wrapper'
    v-show= "searchKey"
    >
        <ul class= "city-search-ul">
        <li
        class= "city-search-li border-bottom"
        v-for= 'item in searchList'
        :key= "item.id"
        @click= 'handleCityChange(item.name)'
        >
            {{item.name}}
        </li>
        <!-- 未找到匹配项,通过v-show，在列表为空时显示这一项 -->
        <li
        class= "city-search-li border-bottom"
        v-show= "!this.searchList.length"
        >
            未找到匹配项
        </li>
    </ul>
    </div>
</div>
</template>
<script>
import BScroll from 'better-scroll'
import { mapMutations } from 'vuex'
export default {
    name: 'city-search',
    data() {
        return {
            // searchKey，搜索栏的输入内容，并且输入内容为空时，通过v-show使容器元素关闭
            searchKey: '',
            searchList: [],
            timer: null,
            wrapper: 'wrapper'
        }
    },
    props: {
        cities: Object
    },
    methods: {
        /////////city-list中也有这个方法，点击城市，通过更改vuex，将首页和当前城市列表中的城市更改，并且返回主页
        handleCityChange(city) {
            //给mutation的hotCityChange方法传递city,直接通过mutation更改state里面的city属性
            this.hotCityChange(city)
            //通过router的push方法，在触发这个事件函数时跳转到跟页面
            this.$router.push('/')
            this.searchKey = ''
        },
        //将名为hotCityChange的mutation以hotCityChange方法映射到当前组件的methods中
        ...mapMutations(['hotCityChange'])
    },
    mounted() {
        this.scroll = new BScroll(this.$refs.wrapper)
    },
    watch: {
        searchKey() {
            let result = []
            if (this.timer) {
                clearTimeout(this.timer)
            }
            this.timer = setTimeout(() => {
                for (let i in this.cities) {
                //cities[i]是数组,里面的每一项item是对象
                    this.cities[i].forEach(item => {
                        //这个条件控制当搜索框为空时，清空用来循环渲染的数据searchList
                        if (!this.searchKey) {
                            result = []
                        } else if (item.spell.indexOf(this.searchKey) > -1 ||
                            item.name.indexOf(this.searchKey) > -1) {
                            result.push(item)
                        }
                    })
                }
                this.searchList = result
            }, 100);
        }
    }
}
</script>

<style lang= "stylus" scoped>
@import '../../../assets/styles/varibles.styl';/* 不能写在url中 */
*
    box-sizing border-box
    padding 0
    margin 0
    .city-search
        height .64rem
        background $bgColor
        color #fff
        display flex
        align-items  center
        justify-content center
        .city-input
            text-align center
            flex 1
            border-radius .2rem
            height .55rem
            margin auto .3rem
            color #666
            margin-bottom .15rem
    .city-search-ul
        z-index 1
        background #eee
        position absolute
        top 1.5rem
        bottom 0
        left 0
        right 0
        .city-search-li
            line-height .6rem
            padding-left .2rem
            color #666
            background #fff
            &:hover
                color red
            &:active
                color blue

</style>
